<template>
    <div class='tip-box' :style=' getTime '>{{ msg }}</div>
</template>

<script>
    // JS + HTML5 组件化开发技术 web component
    // console.log(document)
    //      currentScript 获取当前JS代码所在 script
    //      ownerDocument 获取当前标签所在的文档（当前HTML文件）
    // console.log(document.currentScript.ownerDocument)
    var TipBox = Vue.extend({
        template:document.currentScript.ownerDocument.querySelector("template"),
        data() {
            return {
                msg: "默认消息",
                time: 3000
            }
        },
        computed: {
            getTime() {
                return "animation-duration:" + this.time + "ms"
            }
        },
        mounted() {
            document.body.appendChild(this.$el);
            setTimeout(() => {
                document.body.removeChild(this.$el);
                this.$destroy();
            }, this.time);
        },
    });

    function showTip(msg = "默认值", time = 3000) {
        var tip = new TipBox({
                data: {
                    msg,
                    time,
                    info: "asdasd"
                }
            });
        tip.$mount();
    }
</script>
<style>
    .tip-box {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 6px 12px;
        border-radius: 6px;
        min-width: 50px;
        text-align: center;
        margin-left: 50%;
        transform: translate(-50%, -100%);
        font-size: 16;
        animation: tipFade 1;
        /* animation-duration: ; */
        top: 0px;
        opacity: 0;
    }

    @keyframes tipFade {
        0% {
            transform: translate(-50%, -100%);
            opacity: 0;
        }

        16% {
            transform: translate(-50%, 100%);
            opacity: 1;
        }

        84% {
            transform: translate(-50%, 100%);
            opacity: 1;
        }

        100% {
            transform: translate(-50%, -100%);
            opacity: 0;
        }
    }
</style>